<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
<input type="button" value="加载数据" @click="fn()">
<table border="1" >
    <caption>商品列表</caption>
    <tr>
        <th>商品名</th>
        <th>价格</th>
        <th>库存</th>
    </tr>
    <!--v-for遍历数组 遍历的过程中生成当前元素对象以及里面的子元素-->
    <tr v-for="item in items">
        <td>{{item.name}}</td>
        <td>{{item.price}}</td>
        <td>{{item.count}}</td>
    </tr>
</table>
</div>
<!--引入vue框架-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    let arr=[{name:"鼠标",price:50,count:30},
        {name: "显示器",price: 2050,count: 10},
        {name: "机箱",price: 80,count: 40}];
    //创建vue对象
    let v=new Vue({
        el:"div",
        data:{
            items:[]
        },
        methods:{
            fn:function () {
                v.items=arr;
            }
        }
    })
</script>
</body>
</html>